<template>
  <div class="brand-list">
    <nav-bar title="品牌"></nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div
        class="item"
        v-for="item in brandList"
        :key="item.id"
        @click="toBrandDetail(item.id)"
      >
        <img :src="item.app_list_pic_url" alt="" />
        <p class="info-holder">
          {{ item.name }} | {{ item.floor_price }}元起
        </p>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getBrandList } from "@/api/pages/brandlist.js";
import NavBar from "@/components/common/nav-bar";
export default {
  data() {
    return {
      brandList: [],
      page: 1,
      loading: false,
      finished: false,
      total: 0,
    };
  },
  methods: {
    getData() {
      getBrandList({ page: this.page }).then((res) => {
        console.log(res);
        this.brandList.push(...res.data);
        this.total = res.total;
        this.page++;
        this.loading = false;
      });
    },
    onLoad() {
      if (this.page <= this.total) {
        this.getData();
      } else {
        this.finished = true;
      }
    },
    toBrandDetail(id) {
      this.$router.push({ path: "/pages/brand/detail", query: { id } });
    },
  },
  created() {
    this.getData();
  },
  components: {
    "nav-bar": NavBar,
  },
};
</script>

<style lang="scss" scoped>
.brand-list {
  padding-bottom: 20px;
  .item {
    position: relative;
    margin-bottom: 3px;
    width: 100%;
    background-color: #fff;
    text-align: center;

    img {
      display: block;
      width: 100%;
      height: 210px;
    }

    .info-holder {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-weight: 700;
      font-size: 18px;
    }
  }
}
</style>